<!-- @format -->

<template>
	<div class="app-container">
		<el-form
			v-show="showSearch"
			ref="queryFormRef"
			:inline="true"
			:model="queryParams"
			label-width="70px"
		>
			<el-form-item label="登录地址" prop="ipaddr">
				<el-input
					v-model="queryParams.ipaddr"
					clearable
					placeholder="请输入登录地址"
					style="width: 240px"
					@clear="handleQuery()"
					@keyup.enter.native="handleQuery()"
				/>
			</el-form-item>
			<el-form-item label="用户名称" prop="userName">
				<el-input
					v-model="queryParams.userName"
					clearable
					placeholder="请输入用户名称"
					style="width: 240px"
					@clear="handleQuery()"
					@keyup.enter.native="handleQuery()"
				/>
			</el-form-item>
			<el-form-item label="状态" prop="status">
				<el-select
					v-model="queryParams.status"
					clearable
					placeholder="登录状态"
					style="width: 240px"
					@change="handleQuery()"
				>
					<el-option
						v-for="dict in statusOptions"
						:key="dict.dictValue"
						:label="dict.dictLabel"
						:value="dict.dictValue"
					/>
				</el-select>
			</el-form-item>
			<el-form-item label="操作信息" prop="msg">
				<el-input
					v-model="queryParams.msg"
					clearable
					placeholder="请输入操作信息"
					style="width: 240px"
					@clear="handleQuery()"
					@keyup.enter.native="handleQuery()"
				/>
			</el-form-item>
			<el-form-item label="登录时间" style="font-weight: bold;">
				<el-date-picker
					v-model="dateRange"
					end-placeholder="结束日期"
					format="YYYY-MM-DD HH:mm:ss"
					range-separator="-"
					start-placeholder="开始日期"
					type="datetimerange"
					value-format="YYYY-MM-DD HH:mm:ss"
					@change="handleQuery()"
				>
				</el-date-picker>
			</el-form-item>
			<el-form-item class="item-search">
				<el-button
					icon="refresh"
					@click="resetQuery"
				>重置
				</el-button
				>
				<el-button
					icon="search"
					type="primary"
					@click="handleQuery"
				>搜索
				</el-button
				>
			</el-form-item>
		</el-form>

		<el-row :gutter="10" class="mb8">
			<el-col :span="1.5">
				<el-button
					v-hasPermi="['monitor:logininfor:remove']"
					icon="delete"
					plain
					size="small"
					type="danger"
					@click="handleClean"
				>清空
				</el-button
				>
			</el-col>
			<el-col :span="1.5">
				<el-button
					v-hasPermi="['monitor:logininfor:export']"
					icon="download"
					plain
					size="small"
					type="warning"
					@click="handleExport"
				>导出
				</el-button
				>
			</el-col>
			<el-col v-if="!multiple" :span="1.5">
				<el-button
					v-hasPermi="['monitor:logininfor:remove']"
					:disabled="multiple"
					icon="delete"
					plain
					size="small"
					type="danger"
					@click="handleDelete"
				>删除
				</el-button
				>
			</el-col>
			<!--			<el-col v-if="!multiple" :span="1.5">-->
			<!--				<el-button-->
			<!--					v-hasPermi="['monitor:logininfor:unlock']"-->
			<!--					:disabled="multiple"-->
			<!--					icon="edit"-->
			<!--					plain-->
			<!--					size="small"-->
			<!--					type="primary"-->
			<!--					@click="unlock"-->
			<!--				>解除锁定-->
			<!--				</el-button-->
			<!--				>-->
			<!--			</el-col>-->
			<!-- prettier-ignore -->
			<right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
		</el-row>

		<el-table
			ref="pageTableRef"
			v-loading="loading"
			:data="list"
			height="560"
			@selection-change="handleSelectionChange"
		>
			<el-table-column align="center" type="selection" width="55" />
			<el-table-column
				align="center"
				label="访问编号"
				prop="infoId"
				width="120"
			/>
			<el-table-column
				align="center"
				label="用户名称"
				prop="userName"
				width="150"
			/>
			<el-table-column
				:show-overflow-tooltip="true"
				align="center"
				label="登录地址"
				prop="ipaddr"
				width="200"
			/>
			<el-table-column
				:show-overflow-tooltip="true"
				align="center"
				label="登录地点"
				prop="loginLocation"
			/>
			<el-table-column align="center" label="浏览器" prop="browser" />
			<el-table-column align="center" label="操作系统" prop="os" />
			<el-table-column
				:formatter="statusFormat"
				align="center"
				label="登录状态"
				prop="status"
			>
				<template #default="scope">
					<!-- <el-tag :type="scope.row.status === '0' ? 'success' : 'danger'">{{scope.row.status === "0" ? "成功" : "失败"}}</el-tag> -->
					<!-- <dict-tag
						:options="dict.type.sys_common_status"
						:value="scope.row.status"
					/> -->
					<DataSingleTag :single-data="scope.row.status" :status-options="statusOptions" />
				</template>
			</el-table-column>
			<el-table-column align="center" label="操作信息" prop="msg" />
			<el-table-column
				align="center"
				label="登录日期"
				prop="loginTime"
				width="200"
			>
				<template #default="scope">
					<span>{{ parseTime(scope.row.loginTime, "{y}-{m}-{d}") }}</span>
				</template>
			</el-table-column>
			<el-table-column
				align="center"
				class-name="small-padding fixed-width"
				label="删除"
				width="150"
			>
				<template #default="scope">
					<el-tooltip content="删除" placement="top">
						<el-button v-hasPermi="['monitor:operlog:query']" icon="Delete" link type="danger"
								   @click="handleDelete(scope.row)" />
					</el-tooltip>
				</template>
			</el-table-column>
		</el-table>

		<pagination
			v-show="total > 0"
			v-model:limit="queryParams.pageSize"
			v-model:page="queryParams.pageNum"
			:total="total"
			@pagination="getList"
		/>
	</div>
</template>

<script lang="ts" name="LoginLog" setup>
import LoginLog from "@/api/request/monitor/log/loginLog";

const {
	queryFormRef,
	loading,
	multiple,
	showSearch,
	total,
	list,
	statusOptions,
	dateRange,
	queryParams,
	pageTableRef,
	getList,
	statusFormat,
	handleQuery,
	resetQuery,
	handleSelectionChange,
	handleDelete,
	handleClean,
	handleExport,
	unlock,
	checkSelected,
} = LoginLog();
</script>
